<extend name="layout/main" />

<block name="HEADER">
	<style>
		.table-container{
			width: 100%;
			height: 100%;
			overflow: auto;
			border: 1px solid #ccc;
			padding: 6px;
		}
		.table-container table {
			border-collapse: collapse;
			min-height: 200px;
		}

		.table-container table,
		.table-container tr,
		.table-container th {
			border: 1px solid #ccc;
		}

		.table-container th, .table-container td {
			width: 100px;
			max-width: 100px;
			min-width: 70px;
			/*这里需要自己调整，根据自己的需求调整宽度*/
			height: 42px;
			line-height: 42px;
			/*这里需要自己调整，根据自己的需求调整高度*/
			position: relative;
			text-align: center;
		}
		.table-container th[class=first]{
			overflow: hidden;
			max-width: 100px;
		}

		.table-container th[class=first]:before {
			content: "";
			position: absolute;
			width: 1px;
			height: 300px;
			/*这里需要自己调整，根据td的宽度和高度*/
			top: 0;
			left: 0;
			background-color: black;
			display: block;
			transform: rotate(-49deg);
			/*这里需要自己调整，根据线的位置*/
			transform-origin: top;
		}

		.box {
			width: 100px;
			height: 42px;
			line-height: 20px;
			position: relative;
		}

		.table-container .a {
			position: absolute;
			top: 0;
			left: 50px;

		}

		.table-container .b {
			position: absolute;
			top: 30px;
			left: 20px;
		}
		.bg-red{
			background-color: #f00;
		}
		.title{
			height: 60px;
			line-height: 60px;
			font-size: 16px;
			font-weight: bold;
			padding-left: 10px;
		}
	</style>
</block>

<block name="CONTENT">
	<div class="wrapper">
		<div class="panel-heading">
			<control:search id="searchs" />
		</div>
		<div class="content">
			<div id="app" class="table-container">
				<div class="title">{{message}}</div>
				<table border="" cellspacing="" cellpadding="">
					<thead class="header">
						<tr>
							<!-- <th rowspan="2">1</th> -->
							<th rowspan="2" class="first">
								<div class="box">
									<em class="a">日期</em>
									<em class="b">姓名</em>
								</div>
							</th>
							<th v-for="(item,index) in dates" :key="index">
								{{item.day}}
							</th>
						</tr>
						<tr>
							<th v-for="(item,index) in dates" :key="index">{{item.week}}</th>
						</tr>
					</thead>
					<tbody>
						<tr v-for="(item,index) in staff" :key="index">
							<td>{{item.staff_name}}</td>
							<td v-for="(time, tIndex) in dates"  :key="tIndex" @click="workchange(item, time.day, index)" :class="{ 'bg-red': item.days.indexOf(time.day) > -1}"></td>
						</tr>
					</tbody>
				</table>
			</div>
		</div>
	</div>
</block>

<block name="FOOTER">
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script type="text/javascript">

		var page = (function(ns){
			var app = new Vue({
				el: '#app',
				data: {
					message: '排班表',
					isChange: false,
					// 日期
					dates: [],
					// 用户信息
					staff: [],
					collect: []
				},
				methods: {
					workchange(item, day, index) {
						console.log(item)
						let dayArr = item.days.split(',')
						if( dayArr.indexOf( day ) > -1 ){
							dayArr.forEach( function(item, index){
								if( item == day ){
									dayArr.splice( index, 1 )
								}
							})
						}else{
							dayArr.push( day )
						}
						dayArr.forEach( function(item, index){
							if( item == '' ){
								dayArr.splice( index, 1 )
							}
						})
						this.$set( this.staff[index], 'days', dayArr.join(',') )
						this.isChange = true
					}
				}
			})
			
		    //页面初始化
		    ns.init=function(){
		        ns.query();
		    }
		    
			ns.save=function(){
				if( !app.isChange ){
					$.toast(0, '此月份未执行修改')
					return
				}
				console.log(app.staff)
				let data = JSON.stringify(app.staff)
				
				$.ajaxs('/admin/v1/shop_scheduling/saveData', { data: data }).then(function(res){ 
					$.toast(1,'保存成功');
				})
			}

		    //搜索事件
		    ns.query=function(){
		    	let data = searchs.getData()
				let params = {}
				console.log(data)
				
				for( var i = 0; i < data.length; i++ ){
					params[data[i].field] = data[i].value
				}

				if( !params.date ){
					$.toast(0, '请选择日期')
					return 
				}
				$.ajaxs('/admin/v1/shop_scheduling/getData', params).then(function(res){ 
					if( res.code == 0 ){
						app.message = params.date + '排班表'
						app.dates = res.data.dates
						app.staff = res.data.staff
						app.isChange = false
					}
				})
		    }
		    
			return ns;
		}({}));
		
		
		$(function(){ page.init();  });

	</script>
</block>